<template>
  <div class="todo-footer">
    <label>
      <input type="checkbox" v-model="allChange"/>
      <span>全选/全不选</span>
    </label>
    <span> <span>已完成 {{finished}}</span> / 全部 {{todoList.length}} </span>
    <!--  $emit('delFinished')   自定义事件简写，模板中使用插值语法，存在组件实例,上面有$emit-->
    <button class="btn btn-danger" @click="$emit('delFinished')">清除已完成任务</button>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
  name: "Footer"
})
</script>
<script setup lang="ts">
import {todoListType, todoType} from '@/types/todoList'
import {computed} from "vue";
//直接从defineProps返回的proxy对象中解构出通过props传递的todoList数据
const {todoList} = defineProps<{
  todoList:todoListType
}>()
const emit = defineEmits<{
  (emit:'changeAllTodo',done:boolean):void,
  (emit:'delFinished'):void
}>()
//计算属性计算已完成
const finished = computed(()=>{
  return todoList.filter((item:todoType)=>item.done===true).length
})

//全选按钮实现全选和全不选
const allChange = computed({
  get(){
   return todoList.every((item:todoType)=>item.done)
  },
  set(newVal:boolean){
    //newVal是最新的 get函数得到的值
    //emit 函数 第一参数 是函数名，第二参数是传参
    emit('changeAllTodo',newVal);

  }
})

</script>

<style scoped>
.todo-footer {
  display: flex;
  justify-content: space-between;
  line-height: 40px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  background-color: #ccc;
}
</style>
